<template>
  <div>
    <ComponentA
      :message="parentMessage"
      :number="parentNumber"
      :value="chlidMoney"
      @update-money="handleUpdateMoney"></ComponentA>
    <hr />
    <ComponentB></ComponentB>
    <hr />
    <MyComponent></MyComponent>
    <hr />
    <p>我是父组件</p>
    <input v-model="parentMessage" placeholder="输入消息" />
    <input v-model.number="parentNumber" placeholder="输入数字" />
    <p>孩子的零花钱:{{ chlidMoney }}</p>
  </div>
</template>

<script>
import ComponentA from './components/ComponentA'
import ComponentB from './components/ComponentB'
export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      parentMessage: '',
      parentNumber: null,
      chlidMoney: null
    }
  },
  methods: {
    handleUpdateMoney(chlidMoney) {
      this.chlidMoney = chlidMoney
      console.log(this.chlidMoney)
    }
  }
}
</script>

<style lang="scss" scoped></style>
